import {Panel, LayerLink} from 'comps/common';
import {Table, Menu, Dropdown, Icon} from 'antd';
import * as React from 'react';
import MachineDetail from '../containers/machine-detail';

class ProviderManagerMenu extends React.Component {

  menu = (
    <Menu>
      {this.props.enable ? <Menu.Item key="1">禁用</Menu.Item> : <Menu.Item key="1">启用</Menu.Item>}
      <Menu.Item key="2">
        复制
      </Menu.Item>
    </Menu>
  );

  render() {
    return (
      <Dropdown overlay={this.menu} trigger={['click']}>
        <a className="ant-dropdown-link" href="#">
          管理 <Icon type="down"/>
        </a>
      </Dropdown>
    )
  }

}

const ProviderList = ({providerList}) => {
  const columns = [
    {
      title: '机器IP',
      dataIndex: 'address',
      key: 'address',
      render(address){
        return <LayerLink component={MachineDetail} data={{address:address}}>{address}</LayerLink>
      }
    }, {
      title: '权重',
      dataIndex: 'weight',
      key: 'weight'
    }, {
      title: '状态',
      dataIndex: 'enable',
      key: 'enable',
      render(enable){
        return enable ? <span className="color-success">启用</span> : <span className="color-danger">禁用</span>
      }
    }, {
      title: '检查',
      dataIndex: 'status1',
      key: 'status1'
    }, {
      title: '操作',
      dataIndex: 'enable',
      key: 'operation',
      render(enable) {
        return <ProviderManagerMenu enable={enable}/>;
      }
    }
  ];

  return (
    <Panel title="提供者列表">
      <Table dataSource={providerList} columns={columns} pagination={false} size="middle" rowKey={record => record.id}/>
    </Panel>
  );
}

export default ProviderList;
